import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Toast, Button  } from 'antd-mobile';

import { getUserId } from '../../../utils/utils';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class MinePageBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    componentDidMount() {
    	const { dispatch, meyley } = this.props

    	dispatch({
    		type: 'meyley/fetchMembers',
    		payload: {
    			userId: getUserId()
    		}
    	})
    }
	render() {
		const { meyley } = this.props

	 	return (
	 		<div className={styles['mine-page-body']}>
	 			<div className={styles['mine-page-body-top']}>
	 				<img className={styles['mine-page-bg']} src={require('../../../assets/mine/mine-page-bg.png')} />
	 				<div className={styles['mine-page-body-top-info']}>
	 					<img src={meyley.members && meyley.members.headPic} style={{width: '1.2rem', height: '1.2rem', borderRadius: '50%'}} />
	 					<div style={{fontSize: '0.32rem'}}>{meyley.members && meyley.members.userName}</div>
	 					<div style={{fontSize: '0.24rem'}}>{meyley.members && meyley.members.signature}</div>
	 				</div>
	 			</div>
 				<div className={styles['mine-page-body-bottom']}>
 					<div style={{marginTop: '0.56rem', fontSize: '0.42rem', color: 'rgb(66, 62, 62)'}}>魅力网</div>
 					<div style={{marginBottom: '0.46rem', fontSize: '0.42rem', color: '#7E7B7B'}}>享受品质品味的生活</div>

 					<div>
 						<img src={meyley.members && meyley.members.inviteCodeUrl} style={{width: '2.48rem', height: '2.48rem', marginBottom: '0.12rem'}} />
 					</div>
 					<div style={{fontSize: '0.32rem', color: 'rgb(66,62,62)', marginBottom: '0.12rem'}}>
 					扫码注册新会员
 					</div>
 					<div style={{color: 'rgb(149,149,149)'}}>
 						新人获赠<span style={{fontSize: '0.32rem', color: '#FF035C', marginLeft: '0.04rem', marginRight: '0.04rem', fontStyle: 'italic'}}>88</span>元红包
 					</div>
 				</div>
	 		</div>
	  	);
	}
};

MinePageBody.propTypes = {
};

export default MinePageBody
